{use master_page('front/v_home_master')}

{block body}
<style>
.pic_roll{width:142px;height:154px;margin:0px 5px 5px 5px;float:left;}
	.pic_roll .pic_image img{border:1px solid #E6E6E6;width:120px;height:100px;margin:0 5px;}
	.pic_roll .pic_title a:link,
	.pic_roll .pic_title a:active,
	.pic_roll .pic_title a:visited{text-decoration: none;color: #333;}
	.pic_roll .pic_title a:hover{text-decoration:underline;color:red;} 
	.pic_roll .pic_title{text-align:center;padding:5px 0px 0 0;}
#outer{padding:0px;overflow:hidden;margin:5px 5px 0 -8px;*margin-left:-2px!important;}
#demo{overflow:hidden;float:left;}
</style>

<style type="text/css">
	#demo {
	background: #FFF;
	overflow:hidden;
	border: 0px dashed #CCC;
	border-top: 3px solid white;
	border-left: 5px solid white;
	width: 500px;
	 
	}
	#demo img {
	border: 3px solid white;
	}
	#indemo {
	float: left;
	width: 800%;
	}
	#demo1 {
	float: left;
	}
	#demo2 {
	float: left;
	}
</style>

<SCRIPT src="images/jquery.min.js" type=text/javascript></SCRIPT>
<SCRIPT type=text/javascript> 
	var _c = _h = 0;
	$(document).ready(function () {
	    $('#play  li').click(function(){
	        var i = $(this).attr('alt') - 1;
	        clearInterval(_h);
	        _c = i;
	        //play();
	        change(i);       
	    })
	
	    $("#pic img").hover(function(){clearInterval(_h)}, function(){play()});
	    play();
	})
	
	function play()
	{
	    _h = setInterval("auto()", 8000);
	}
	
	function change(i)
	{
	    $('#play li').css('background-color','#000000').eq(i).css('background-color','#FF3000').blur();
	    $("#pic img").fadeOut('slow').eq(i).fadeIn('slow');
	}
	
	function auto()
	{   
		  _c = _c > 6 ? 0 : _c + 1;
	    change(_c);
	
	}

</SCRIPT>

<style type="text/css">
.img_switch {margin:0 auto;WIDTH:1000px;HEIGHT: 261px; overflow:hidden;
	border:0px solid red}
.img_switch_content {HEIGHT: 261px;position:relative;}
.img_switch_text {width: 262px;position: absolute;z-index:10; bottom:5px;left:10px;HEIGHT: 15px; z-index:10000 !important}
.number_nav {DISPLAY: inline;FLOAT: left;}
.number_nav UL {font:12px Arial, Helvetica, sans-serif;padding: 0px;MARGIN: 0px;LIST-STYLE-TYPE: none;color:#fff;}
.number_nav UL LI {float: left;font-weight: bold;background: #000;float: left;margin-right: 8px;width: 23px;cursor: pointer;line-height: 17px;height: 17px;text-align: center;filter:alpha(opacity=75);-moz-opacity:0.75;opacity: 0.75;}
#pic {OVERFLOW: hidden}

</style>



<center>
<div class="content">
  <div class="main">
    <div class="container">
      <div class="img_switch">
      <div class="img_switch_content" id="pic"> 
		<a href="http://cms.jurensoft.cn" target="_blank">
			<img src="images/banner3.jpg" style="display: none; ">
		</a> 
		<a href="http://cms.jurensoft.cn" target="_blank">
			<img src="images/banner4.jpg" style="display: none; ">
		</a> 
		<a href="http://cms.jurensoft.cn" target="_blank">
			<img src="images/banner3.jpg" style="display: none; ">
		</a>
		<a href="http://cms.jurensoft.cn" target="_blank">
			<img src="images/banner4.jpg" style="display: none; ">
		</a>
		<a href="http://cms.jurensoft.cn" target="_blank">
			<img src="images/banner3.jpg" style="display: none; ">
		</a> 
		<a href="http://cms.jurensoft.cn" target="_blank">
			<img src="images/banner4.jpg" style="display: none; ">
		</a> 
		<a href="http://cms.jurensoft.cn" target="_blank">
			<img src="images/banner3.jpg" style="display: none; ">
		</a> 
		<a href="http://cms.jurensoft.cn" target="_blank">
			<img src="images/banner4.jpg" style="display: inline; ">
		</a>
        <div class="images_switch_text" style="width: 262px;position: absolute;z-index:10; bottom:5px;left:10px;height: 15px; z-index:10000 !important">
          <div class="number_nav">
            <ul id="play">
              <li alt="1" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(0, 0, 0); background-position: initial initial; background-repeat: initial initial; ">1</li>
              <li alt="2" style="background-color: rgb(0, 0, 0); ">2</li>
              <li alt="3" style="background-color: rgb(0, 0, 0); ">3</li>
              <li alt="4" style="background-color: rgb(0, 0, 0); ">4</li>
              <li alt="5" style="background-color: rgb(0, 0, 0); ">5</li>
              <li alt="6" style="background-color: rgb(0, 0, 0); ">6</li>
              <li alt="7" style="background-color: rgb(0, 0, 0); ">7</li>
              <li alt="8" style="background-color: rgb(255, 48, 0); ">8</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    </div>
    <div class="box1">
      <div class="img1"><img style="margin-left:-30px" src="images/icon3.jpg" width="122" height="152"></div>
      <div class="txt">
        <h2><a >公司简介</a></h2>
        <div class="txt2">
          <p><?php $page = $this->page_manager->get(array('alias'=>'company'));?>
			 <?=$page->get_profile(86)?>...... </p>
        </div>
        <div class="at2">
        	<span><a href="<?=_U("page/show?alias=company")?>">&gt;&gt;了解更多</a></span>
        </div>
      </div>
      <div class="clear"></div>
    </div>
    <div class="box1">
      <div class="img1"><img src="images/icon4.jpg" width="122" height="152"></div>
      <div class="txt">
        <h2><a >公司动态</a></h2>
        <div class="txt2">
          <ul class="menu1">
	        <?php $articles = $this->article_manager->get_list(array('class.alias'=>'news','descendant'=>'true','page'=>1,'page_size'=>4));?>
			<?foreach($articles as $article):?>
			<li>
				<a href="<?=_U("article/show?id=$article->id")?>"><?=$article->title(16)?></a> 
			</li>   
			<?endforeach?>
     	 </ul>
        </div>
        <div class="at2">
        	<span><a href="<?=_U("article/index?class-alias=news")?>">&gt;&gt;了解更多</a></span> 
        </div>
      </div>
      <div class="clear"></div>
    </div>
    <div class="clear"></div>
    <div style="background:url(images/bg6.jpg) repeat-x; height:2px; width:100%; margin-bottom:18px; overflow:hidden"></div>
    <div class="box2">
      <h2 class="title1"><img src="images/icon1.jpg">&nbsp;&nbsp;产品展示</h2>
		<div class="profile" style="width:95%;margin-right:15px;">
			<div id="outer" style="border:0px solid black;">
			
			
			
				<div id="demo" style="margin-top:8px;*margin-top:2px!important;"><div id="indemo">
					<div id="demo1">
						<?php $articles = 
								$this->article_manager->get_list(array('class.alias'=>'products','descendant'=>'true','page'=>1,'page_size'=>8));
						?>
						<?foreach($articles as $article):?> 
							<a href="<?=_U("article/show?id=$article->id")?>">
								<img style="width:128px;height:106px" src="<?=$article->fetch_image(0)?>" border="0" />
							</a>
						<?endforeach?>
					</div>
					<div id="demo2"></div>
				</div></div>
				
				
				
				
				<script>
					var speed=18;
					var tab=document.getElementById("demo");
					var tab1=document.getElementById("demo1");
					var tab2=document.getElementById("demo2");
					tab2.innerHTML=tab1.innerHTML;
					function Marquee(){
					if(tab2.offsetWidth-tab.scrollLeft<=0)
					tab.scrollLeft-=tab1.offsetWidth
					else{
					tab.scrollLeft++;
					}
					}
					var MyMar=setInterval(Marquee,speed);
					tab.onmouseover=function() {clearInterval(MyMar)};
					tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
				</script>


			
			</div>
		</div>
    </div>
    <table class="box3">
      <tr class="txt3"><td style="text-align:center">
        <h2 class="title2"><img src="images/icon2.gif">&nbsp;&nbsp;客服中心</h2>
        <img src="images/phone.gif" width="198" height="111"></td>
      <td class="img2" style="text-align:center" ><a href="<?php echo _U('guest_book/show') ?>"><img src="images/icon5.gif" width="162" height="158"></a></td></tr>
    </table>
    <div class="clear"></div>
   </div>
</div>
</center>
{end} 